import {HotkeysEvent, KeyHandler} from 'hotkeys-js'
import useHotKey from '../hooks/useHotKey'
import useEditorStore from "@/store/editor.ts";

const wrap = (callback: KeyHandler) => {
  return (e: KeyboardEvent, event: HotkeysEvent) => {
    e.preventDefault()
    callback(e, event)
  }
}
export default function initHotKeys() {
  const editorStore = useEditorStore()
  useHotKey('ctrl+c, command+c', () => {
    editorStore.copyComponent()
  })
  useHotKey('ctrl+v, command+v', () => {
    editorStore.pasteComponent();
  })
  useHotKey('backspace, delete', () => {
    editorStore.removeComponent(null)
  })
  useHotKey('esc', () => {
    editorStore.setActiveComponent(null)
  }) 
  useHotKey('up', wrap(() => {
    editorStore.moveComponent({ direction: 'Up', amount: 1 })
  }))
  useHotKey('down', wrap(() => {
    editorStore.moveComponent({ direction: 'Down', amount: 1})
  }))
  useHotKey('left', wrap(() => {
     editorStore.moveComponent({ direction: 'Left', amount: 1})
  }))
  useHotKey('right', wrap(() => {
     editorStore.moveComponent({ direction: 'Right', amount: 1})
  }))
  useHotKey('shift+up', () => {
     editorStore.moveComponent({ direction: 'Up', amount: 10})
  })
  useHotKey('shift+down', () => {
     editorStore.moveComponent({ direction: 'Down', amount: 10})
  })
  useHotKey('shift+left', () => {
     editorStore.moveComponent({ direction: 'Left', amount: 10})
  })
  useHotKey('shift+right', () => {
     editorStore.moveComponent({ direction: 'Right', amount: 10})
  })
}